<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<title>项目管理工具</title>
<meta charset="gbk">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
	$(function() {
		$(".dropdown-toggle").dropdown();
	});
	$(function() {
		var managerSelect = document.getElementById("managerSelect");
		var memberSelect1 = document.getElementById("memberSelect1");

		var param = "teamid=${nowteamid}";
		$.ajax({
			type : 'post',
			url : 'getAllTeamMeber.do',
			data : param,
			success : function(data) {

				//	      	alert(data);
				var dataObj = eval("(" + data + ")");

				for (var i = 0; i < dataObj.length; i++) {

					var proAttr = dataObj[i];
					var userid = proAttr.userId;
					var username = proAttr.userName;
					var newOption = new Option(username, userid);
					var newOption1 = new Option(username, userid);
					managerSelect.options.add(newOption);
					memberSelect1.options.add(newOption1);

				}

			},
			error : function() {
				alert("出错了！");
			}
		});
	});
</script>
<script>
	$(function() {
		$('#myModal').modal('hide')
	});
</script>
<script>
	$(function() {
		$('#myModal')
				.on(
						'hidden.bs.modal',
						function() {
							var groupMember = document
									.getElementById("addGroupMember");
							var projectName = document
									.getElementById("projectName").value;
							var description = document
									.getElementById("description").value;
							var managerSelect = document
									.getElementById("managerSelect").value;
							var memberSelect1 = document
									.getElementById("memberSelect1").value;
							
						
					
						   if(projectName==""||managerSelect==0){
							   alert("项目名或项目经理不能为空！");
						   }else{	
							
							
							var arr = new Array();
							arr[0] = memberSelect1;
							for (var i = 2; i < 100; i++) {
								var memberSelect = document
										.getElementById("memberSelect" + i);
								if (memberSelect != null) {
									arr[i - 1] = memberSelect.value;
								} else {
									break;
								}
							}
							var param = "projectName=" + projectName
									+ "&description=" + description
									+ "&managerSelect=" + managerSelect
									+ "&arr=" + arr + "&teamid=${nowteamid}";

							//	for (var i = 0; i < arr.length; i++) {
							//		param+="&memberSelect"+(i+2)+"="+arr[i];
							//	}

							//   	alert(param);
							groupMember.innerHTML = "";
							//      	alert('提交');
							$
									.ajax({
										type : 'post',
										url : 'addProject.do',
										data : param,
										success : function(data) {

											$('#pj').empty();
											var html = "";
											var pj = document
													.getElementById("pj");

											var dataObj = eval("(" + data + ")");

											for (var i = 0; i < dataObj.length; i++) {

												var proAttr = dataObj[i];
												var projectId = proAttr.projectId;
												var projectName = proAttr.projectName;
												html += "<div class='projectlist'></br> <a href='gotoProjectDetail.do?projectid="
														+ projectId
														+ "&teamid=${nowteamid}'> <span class='glyphicon glyphicon-cloud' style='font-size: 60px'></span></a> </br> <a href='gotoProjectDetail.do?projectid="
														+ projectId
														+ "&teamid=${nowteamid}'>"
														+ projectName
														+ "</a></div>";

											}
											html += "<div class='projectlist'></br> <a data-toggle='modal' data-target='#myModal'> <span class='glyphicon glyphicon-plus' style='font-size: 50px'></span></a> </br> <a data-toggle='modal' data-target='#myModal'>新增项目</a></div>";
											pj.innerHTML = html;
											memberValue = 1;
										},
										error : function() {
											alert("出错了！");
										}
									});
							}
						})
					

	});
	var memberValue = 1;
	function addGroupMember() {

		var groupMember = document.getElementById("addGroupMember");
		memberValue++;
		var param = "teamid=${nowteamid}";
		$
				.ajax({
					type : 'post',
					url : 'getAllTeamMeber.do',
					data : param,
					success : function(data) {

						var dataObj = eval("(" + data + ")");
						var html;
						html = "<div class='form-group'> <label for='name'>指定成员</label> <select id='memberSelect"+memberValue+"' class='form-control'><option value='0'>--请选择--</option>";

						for (var i = 0; i < dataObj.length; i++) {

							var proAttr = dataObj[i];
							var userid = proAttr.userId;
							var username = proAttr.userName;
							html += "<option value='"+userid+"'>" + username
									+ "</option>";

						}
						html += "</select></div>";
						groupMember.innerHTML += html;

					},
					error : function() {
						alert("出错了！");
					}
				});

	}
</script>


<style type="text/css">
body {
	margin: 0px;
	background: url(style/image/background/bangongshi1xh.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;

}
.pj {
	
}

.projectlist {
background: url(style/image/background/card1.png) no-repeat;
    background-size: 100% 100%;
	padding-top: 10px;
	margin: 5px;
	float: left;
	text-align: center;
	height: 200px;
	width: 200px;
	font-size: 20px;
}

.projectlist:hover {
		 background: url(style/image/background/card2.png) no-repeat;
	 background-size: 100% 100%;
}
</style>
</head>
<body>

	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<nav class="navbar navbar-default" role="navigation">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span><span
								class="icon-bar"></span><span class="icon-bar"></span><span
								class="icon-bar"></span>
						</button>

					</div>

					<div class="collapse navbar-collapse"
						id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">

							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown">项目管理工具<strong class="caret"></strong></a>
								<ul class="dropdown-menu">

									<li class="divider"></li>
									<li><a>切换团队</a></li>
									<li class="divider">切换团队</li>
									<c:if test="${empty allTeam}">
									</c:if>
									<c:if test="${not empty allTeam}">
										<c:forEach var="team" items="${allTeam}">
											<c:if test="${team.teamid eq nowteamid}">
												<li><a href="gotoTeamDetail.do?teamid=${team.teamid}">${team.teamname}
														&nbsp; &nbsp;<span class="glyphicon glyphicon-ok"></span>
												</a></li>
											</c:if>
											<c:if test="${team.teamid  ne nowteamid}">
												<li><a href="gotoTeamDetail.do?teamid=${team.teamid}">${team.teamname}</a></li>
											</c:if>

										</c:forEach>
										<li class="divider">团队管理</li>
										<li><a href="gotoTeamList.do">团队管理</a></li>
									</c:if>

								</ul></li>
						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li><a><img	 src="${currentUser.headimage}" width="27" height="27">
							</a></li>
							<li><a>HI!，${currentUser.userName}</a></li>
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown"><span
									class="glyphicon glyphicon-bell"></span>${applyPartListSize}<strong
									class="caret"></strong></a>
								<ul class="dropdown-menu">
									<c:if test="${empty applyPartList}">

										<li><a href="gotoTeamDetail.do?teamid=${nowteamid}">暂时没有通知</a></li>
									</c:if>
									<c:if test="${not empty applyPartList}">
										<c:forEach var="applyUser" items="${applyPartList}">


											<li><a href="gotoTeamDetail.do?teamid=${nowteamid}">${applyUser.username}&nbsp;申请加入团队</a></li>

										</c:forEach>
										<li class="divider"></li>
										<li><a href="gotoTeamDetail.do?teamid=${nowteamid}">更多</a></li>
									</c:if>

								</ul></li>
							<li><a href="logout.do">注销</a></li>
						</ul>
					</div>

				</nav>
			</div>
		</div>



		<div class="row clearfix">
			<div class="col-md-3 column">
				<ul class="nav nav-stacked nav-tabs">
					<li ><a
						href="gotoTeamDetail.do?teamid=${nowteamid}">团队</a></li>
					</br>
					<li class="active"><a href="gotoProjectList.do?teamid=${nowteamid}">项目</a></li>
					</br>
						<li><a href="gotoUserinfo.do?teamid=${nowteamid}">信息</a></li>

				</ul>
			</div>


			<div class="col-md-9 column">
				<div class="pj" id="pj">


					<c:if test="${empty projectsList}">


					</c:if>
					<c:if test="${not empty projectsList}">
						<c:forEach var="project" items="${projectsList}">


							<div class="projectlist">
								</br> <a href="gotoProjectDetail.do?projectid=${project.projectId}&teamid=${nowteamid}"> <span
									class="glyphicon glyphicon-cloud" style="font-size: 60px"></span>
								</a> </br> <a href="gotoProjectDetail.do?projectid=${project.projectId}&teamid=${nowteamid}">${project.projectName}</a>
							</div>

						</c:forEach>

					</c:if>




					<div class="projectlist">
						</br> <a data-toggle="modal" data-target="#myModal"> <span
							class="glyphicon glyphicon-plus" style="font-size: 50px"></span>
						</a> </br> <a data-toggle="modal" data-target="#myModal">新增项目</a>
					</div>
					
				</div>
			</div>


			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">×</button>
							<center>
								<h4 class="modal-title" id="myModalLabel">新增项目</h4>
							</center>
						</div>


						<div class="modal-body">
							<div class="form-group">
								<label for="name">项目名称</label> <input name="projectName"
									id="projectName" type="text" class="form-control"
									placeholder="项目名称">
							</div>
							<div class="form-group">
								<label for="name">项目描述</label>
								<textarea name="description" id="description"
									class="form-control" rows="3"></textarea>
							</div>
							<div class="form-group">
								<label for="name">指定项目经理</label> <select id="managerSelect"
									class="form-control">
									<option value="0">--请选择--</option>

								</select>
							</div>
							<div class="form-group">
								<label for="name">指定成员</label> <select id="memberSelect1"
									class="form-control">
									<option value="0">--请选择--</option>
								</select>
							</div>
							<div id="addGroupMember"></div>
						</div>
						<button type="button" class="btn btn-default btn-lg btn-block"
							onclick="addGroupMember()">增加成员</button>

						<div class="modal-footer">
							<button type="button" class="btn btn-primary "
								data-dismiss="modal">提交</button>

						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>




		</div>
</body>
</html>
